<template>
  <div class="fbtj_box" :class="$store.state.tjwz==true?'fbxjtk_box':''">
    <header-comm v-if="$store.state.tjwz==false"></header-comm>
    <div :class="$store.state.tjwz==false?'bcg':''">
      <div class="fbtj" :class="$store.state.tjwz==true?'tjgl_fbtj':''">
        <div class="head" v-if="$store.state.tjwz">
          <span></span>
          <span>
            <a-icon type="close" @click="close" />
          </span>
        </div>
        <div class="fbtj_inp">
          <a-form :form="form" @submit="AddTejia">
            <ul>
              <li>
                <div class="fbtj_form">
                  <a-form-item label="标题" :label-col="{ span: 5 }" :wrapper-col="{ span: 2 }">
                    <a-input
                      style="width:500px"
                      placeholder="请输入标题"
                      v-decorator="[
          'spzt',
          {rules: [{ required: true, message: '*标题不能为空!' }],initialValue:$store.state.tjdata.spzt}
        ]"
                    />
                  </a-form-item>
                </div>
              </li>
              <li></li>
              <li>
                <div class="fbtj_form1">
                  <a-form-item label="型号" :label-col="{ span: 5 }" :wrapper-col="{ span: 2 }">
                    <a-input
                      style="width:200px"
                      placeholder="请输入型号"
                      v-decorator="[
          'xl',
          {rules: [{ required: true, message: '*型号不能为空!' }],initialValue:$store.state.tjdata.xl}
        ]"
                    />
                  </a-form-item>
                </div>
                <div class="fbtj_form2">
                  <a-form-item label="品牌" :label-col="{ span: 5 }" :wrapper-col="{ span: 2 }">
                    <a-input
                      style="width:200px"
                      placeholder="请输入品牌"
                      v-decorator="[
          'pp',
          {rules: [{ required: true, message: '*品牌不能为空!' }],initialValue:$store.state.tjdata.sccjc}
        ]"
                    />
                  </a-form-item>
                </div>
              </li>
              <li>
                <div class="fbtj_form1">
                  <a-form-item label="价格" :label-col="{ span: 5 }" :wrapper-col="{ span: 2 }">
                    <a-input-number
                      size="large"
                      :min="1"
                      :max="100000"
                      style="width:200px"
                      placeholder="请输入价格"
                      v-decorator="[
          'jg',
          {rules: [{ required: true, message: '*价格不能为空!' }],initialValue:$store.state.tjdata.xsjg}
        ]"
                    />
                  </a-form-item>
                </div>
                <div class="fbtj_form2">
                  <a-form-item label="数量" :label-col="{ span: 5 }" :wrapper-col="{ span: 2 }">
                    <a-input-number
                      size="large"
                      :min="1"
                      :max="100000"
                      style="width:200px"
                      placeholder="请输入数量"
                      v-decorator="[
          'num',
          {rules: [{ required: true, message: '*数量不能为空!' }],initialValue:$store.state.tjdata.kgsl}
        ]"
                    />
                  </a-form-item>
                </div>
              </li>

              <li>
                <a-form-item label="计量单位：" :label-col="{ span: 5 }" :wrapper-col="{ span: 2 }">
                  <a-select
                    style="width: 500px"
                    placeholder="计量单位"
                    @change="Changejldw"
                    v-decorator="[
          'jldw',
          {rules: [{ required: true, message: '*计量单位不能为空!' }],initialValue:$store.state.tjdata.jldw}
        ]"
                  >
                    <a-select-option
                      v-for="(item,i) in jldwlistDate"
                      :key="i"
                      :value="item"
                    >{{item}}</a-select-option>
                  </a-select>
                </a-form-item>
              </li>
              <li>
                <div>
                  <span class="inp_tit">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
                  <a-input
                    style="width:500px"
                    type="text"
                    placeholder="请填写备注内容（最多允许输入30个汉字！）"
                    v-model="bz"
                  />
                </div>
              </li>
              <li>
                <div :class="$store.state.tjwz==true?'fbtj_form3':'fbtj_form4'">
                  <span class="inp_tit">主营产品：</span>

                  <div class="clearfix">
                    <a-upload
                      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                      listType="picture-card"
                      :fileList="fileList"
                      @preview="handlePreview"
                      @change="handleChange"
                      accept=".jpg"
                  
                    >
                      <div v-if="fileList.length < 3">
                        <a-icon type="plus" />
                        <div class="ant-upload-text">上传产品图</div>
                      </div>
                    </a-upload>
                  </div>
                </div>
                <!-- 结束 上传产品图 -->
              </li>
              <li>
                <div>
                  <span class="inp_tit">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
                  上传图片不能超过2M
                </div>
              </li>
              <li class="foot_btn">
                <div style="width:100%;">
                  <a-button type="primary" @click="AddTejia">提交</a-button>
                  <a-button @click="close">取消</a-button>
                </div>
              </li>
            </ul>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";
import { setTimeout } from "timers";

export default {
  inject: ["reload"],
  data() {
    return {
      picimg: [],
      uid: "",
      spzt: "", //标题
      xl: "", //型号
      sccjc: "", //品牌
      xsjg: "", //价格
      kgsl: "", //数量
      bz: "", //备注
      jldwDate: "", //计量单位值
      jldwlistDate: [], //计量单位列表
      //主营产品----开始
      previewVisible: false,
      previewImage: "",
      fileList: [],
      thumbUrl: [],
      formLayout: "horizontal",
      form: this.$form.createForm(this)
    };
  },
  components: {
    headerComm
  },
  methods: {

    //发布特价
    AddTejia(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        console.log(values);
        if (this.$store.state.xgtj == true) {
          //特价信息修改
          if (
            values.spzt != "" &&
            values.xl != "" &&
            values.pp != "" &&
            values.jg != "" &&
            values.num != "" &&
            this.jldwDate != ""
          ) {
            if (this.fileList) {
              for (var i = 0; i < this.fileList.length; i++) {
                if (this.fileList[i].url != undefined) {
                  this.thumbUrl.push(this.picimg[i]);
                } else {
                  this.thumbUrl.push(this.fileList[i].thumbUrl);
                }
              }
              console.log(this.thumbUrl);
            }
            this.axios
              .post(
                "tejia/TejiaListEdit.php",
                qs.stringify({
                  id_num: this.$store.state.tjdata.id_num,
                  //标题
                  spzt: values.spzt,
                  //型号
                  xl: values.xl,
                  //品牌
                  sccjc: values.pp,
                  //价格
                  xsjg: values.jg,
                  //数量
                  kgsl: values.num,
                  //计量单位
                  jldw: this.jldwDate,
                  //备注
                  bz: this.bz,
                  //主营产品图
                  productpic: this.thumbUrl
                })
              )
              .then(res => {
                console.log(res);
                if (res.data.code == 303) {
                  this.$notification["success"]({
                    message: "成功",
                    description: res.data.msg
                  });
                  //关闭弹出框
                  this.$store.state.tjwz = false;
                  this.$store.state.xgtj = false;
                  this.$store.state.tjdata = [];
                  this.reload();
                } else {
                  this.$notification["error"]({
                    message: "失败",
                    description: res.data.msg
                  });
                }
                this.$store.state.tjdata = [];
              });
          }
        } else {
          //特价信息添加

          if (
            values.spzt != "" &&
            values.xl != "" &&
            values.pp != "" &&
            values.jg != "" &&
            values.num != "" &&
            this.jldwDate != ""
          ) {
            if (this.fileList) {
              for (var i = 0; i < this.fileList.length; i++) {
                this.thumbUrl.push(this.fileList[i].thumbUrl);
              }
              console.log(this.thumbUrl);
            }
            this.axios
              .post(
                "tejia/PushTejia.php",
                qs.stringify({
                  //用户登陆的手机号
                  phone: this.$store.state.bbl_phone,
                  //授权单位IDd
                  sqdwid: this.$store.state.bbl_sqdwid,
                  //标题
                  spzt: values.spzt,
                  //型号
                  xl: values.xl,
                  //品牌
                  sccjc: values.pp,
                  //价格
                  xsjg: values.jg,
                  //数量
                  kgsl: values.num,
                  //计量单位
                  jldw: this.jldwDate,
                  //备注
                  bz: this.bz,
                  //主营产品图
                  productpic: this.thumbUrl
                })
              )
              .then(res => {
                console.log(res);
                if (res.data.code == 303) {
                  this.$notification["success"]({
                    message: "成功",
                    description: res.data.msg
                  });
                  this.thumbUrl = [];
                  this.$store.state.tjwz = false;
                  //需要页面刷新
                  this.reload();
                } else {
                  this.$notification["error"]({
                    message: "失败",
                    description: res.data.msg
                  });
                  this.thumbUrl = [];
                }
              });
          }
        }
        if (!err) {
        }
      });
    },

    //计量单位(初始化)
    jldwlist() {
      this.axios.post("tejia/jldwlist.php").then(res => {
        console.log(res);
        if (res.data.code == 303) {
          this.jldwlistDate = res.data.result;
        }
      });
    },
    //计量单位获取值
    Changejldw(value) {
      this.jldwDate = value;
    },
    //数量
    numChange(value) {
      this.kgsl = value;
    },
    //价格
    moneyChange(value) {
      this.xsjg = value;
    },

    //主营产品
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      this.$store.state.fileList = fileList;

      if (this.fileList) {
        this.thumbUrl = [];
      }
    },

    //关闭弹窗按钮
    close() {
      if (this.$store.state.tjwz == false) {
        this.reload();
      }
      this.$store.state.tjwz = false;
      this.$store.state.xgtj = false;
      this.$store.state.tjdata = [];
    }
  },

  created() {
    //计量单位列表
    this.jldwlist();
    //修改
    if (this.$store.state.xgtj == true) {
      this.spzt = this.$store.state.tjdata.spzt;
      this.xl = this.$store.state.tjdata.xl;
      this.sccjc = this.$store.state.tjdata.sccjc;
      this.xsjg = this.$store.state.tjdata.xsjg;
      this.kgsl = this.$store.state.tjdata.kgsl;
      this.jldwDate = this.$store.state.tjdata.jldw;
      this.bz = this.$store.state.tjdata.bz;
      this.picimg = this.$store.state.tjdata.pic;

      if (this.picimg != " ") {
        for (var i = 0; i < this.picimg.length; i++) {
          let list = {
            uid: i,
            name: " ",
            status: " ",
            url: "http://yb.bearing.cn/" + this.picimg[i]
          };
          this.fileList.push(list);
        }
      }
    }
  }
};
</script>

<style lang='less'>
.fbtj_box {
  .tjgl_fbtj {
    width: 62% !important;
    padding: 30px !important;
    top: 40px !important;

    li {
      margin: 11px 0 !important;
    }

    .foot_btn {
      width: 87% !important;
    }
  }

  .fbtj {
    width: 98%;
    height: auto;
    box-shadow: 0px 0px 7px #ccc;
    background-color: #fff;
    margin: 9px auto;
    position: relative;
    top: 63px;
    // transform: translateX(-50%);
    text-align: left;
    padding: 30px 77px;

    .head {
      display: flex;
      justify-content: space-between;

      i {
        font-size: 20px;
      }
    }

    .fbtj_inp {
      ul {
        li {
          margin: 10px 0 0;
          display: flex;
          justify-content: space-between;
          position: relative;
          .ant-form-explain {
            width: 300px;
          }
          .fbtj_form1 {
            width: 31%;
          }
          .fbtj_form2 {
            position: absolute;
            left: 300px;
            width: 69%;
          }
          .fbtj_form4 {
            width: 69%;
          }
          .ant-form-item {
            margin-bottom: 10px !important;
          }
          .ant-form-item-with-help {
            margin: 0 !important;
          }
          .ant-form-item-label {
            width: 100px !important;
          }
          .ant-input-number-lg {
            height: 30px;
            input {
              height: 100%;
            }
          }
          input {
            vertical-align: middle;
          }

          .inp_tit {
            display: inline-block;
            width: 100px;
            text-align: right;

            .bt {
              display: inline-block;
              color: red;
              margin: 0 5px;
            }
          }

          .ts {
            margin: 7px 0 -7px 96px;
            color: red;
            font-size: 12px;
            i {
              margin: 0 5px;
            }
          }
          .clearfix {
            width: 80%;
            display: inline-block;
            vertical-align: middle;

            .ant-upload.ant-upload-select-picture-card {
              border: 1px dashed #d9d9d9 !important;
              width: 104px !important;
              height: 104px !important;
            }
          }

          ant-upload.ant-upload-select-picture-card :hover {
            border-color: #40a9ff !important;
          }

          .yblist .cpimgfoot .uploadimg .avatar {
            margin: 0 auto;
          }

          /* you can make up upload button and sample style by using stylesheets */

          .ant-upload-select-picture-card i {
            font-size: 32px;
            color: #999;
          }

          .ant-upload-select-picture-card .ant-upload-text {
            margin-top: 8px;
            color: #666;
          }
        }

        .foot_btn {
          width: 60%;
          text-align: center;

          button {
            margin: 0 20px;
            width: 150px;
          }
        }
      }
    }
  }
}
.fbxjtk_box {
  .fbtj_form2 {
    width: 52% !important;
  }
  .fbtj_form3 {
    width: 100% !important;
  }
  .ant-upload.ant-upload-select-picture-card {
    width: 70px !important;
    height: 70px !important;
  }
  .ant-upload-list-item {
    width: 70px !important;
    height: 70px !important;
  }
}
</style>
